////
/// @group object-fit
////

@use "sass:list";
@use "./utils";

/// Set to `true` to disable generating any styles
/// @type Boolean
$disable-everything: false !default;

/// Set to `true` to only disable the `object-fit: cover` styles
/// @type Boolean
$disable-cover: false !default;

/// Set to `true` to only disable the `object-fit: fill` styles
/// @type Boolean
$disable-fill: false !default;

/// Set to `true` to only disable the `object-fit: none` styles
/// @type Boolean
$disable-none: false !default;

/// Set to `true` to only disable the `object-fit: scale-down` styles
/// @type Boolean
$disable-scale-down: false !default;

/// The default display property value. This could be `flex`, `grid`, etc if it
/// should be applied globally.
///
/// @type String
$display: block !default;

/// The default set of aspect ratios to support. The map key should be the class
/// name suffix and the value a space separate list.
///
/// @type Map
$aspect-ratios: (
  "16-9": 16 9,
  "4-3": 4 3,
  "1-1": 1 1,
) !default;

/// Generates all the styles for the `objectFit` class name utility and should
/// not be used if calling `@include core.styles`.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(object-fit, $disable-layer) {
      .rmd-object-fit {
        display: inline-block;
        height: auto;
        max-width: 100%;

        &--contain {
          display: $display;
          height: 100%;
          object-fit: contain;
          width: 100%;
        }

        @if not $disable-cover {
          &--cover {
            object-fit: cover;
          }
        }

        @if not $disable-fill {
          &--fill {
            object-fit: fill;
          }
        }

        @if not $disable-none {
          &--none {
            object-fit: none;
          }
        }

        @if not $disable-scale-down {
          &--scale-down {
            object-fit: scale-down;
          }
        }

        @each $suffix, $ratio-list in $aspect-ratios {
          &--#{$suffix} {
            aspect-ratio: list.slash($ratio-list...);
          }
        }
      }
    }
  }
}
